<template>
  <div class="accepting-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="tree-container">
        <div class="tree-header">
          <h3>分部分项目录树</h3>
          <div class="btns">
            <el-button size="small" type="primary">同步</el-button>
            <el-button size="small" type="primary">管理目录</el-button>
          </div>
        </div>
        <div class="tree-search">
          <el-input
            placeholder="请输入关键字进行过滤"
            v-model="keyword"
            @keydown.native.enter="handleSearch">
          </el-input>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
        </div>
        <div class="tree-content"></div>
      </div>
      <div class="content">
        <div class="echart-container">
          <div class="echarts-item">
            <echarts-base :options="rectificationOptions"></echarts-base>
          </div>
          <div class="echarts-item complete">
            <echarts-base :options="typeOptions"></echarts-base>
          </div>
        </div>
        <div class="table-container">
          <div class="table-search">
            <div class="search-item">
              <label>搜索：</label>
              <el-input v-model="searchValue"></el-input>
            </div>
            <div class="search-item">
              <label>按日期搜索：</label>
              <el-date-picker
                v-model="searchDate"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <el-table
            class="table-content"
            v-loading="tableLoading"
            element-loading-custom-class="custom-load"
            :data="tableData"
            :height="$setRem(280)"
            style="width: 100%">
            <el-table-column prop="sender" label="评价表"></el-table-column>
            <el-table-column prop="createdDate" label="发布时间"></el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
              <template slot-scope="scope">
                <el-button type="text" @click="handleLook(scope.row)">
                  查看评级表
                </el-button>
                <el-button type="text" @click="handleDownload(scope.row)">
                  下载评级表
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="total > 10"
            :page-size="pageSize"
            :current-page="pageNo"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import echartsBase from '@/components/echarts/base';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '质量管理',
        },
        {
          name: '质量验评'
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 1,
      pageNo: 10,
      keyword: '',
      searchValue: '',
      searchDate: ''
    };
  },
  computed: {
    // 质量类型占比图表数据
    typeOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        legend: {
          data: ['完成', '未完成'],
          bottom: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            label: {
              formatter: '{b}: {d}%'
            },
            data: [
              {
                value: 100,
                name: '完成',
                itemStyle: {
                  color: 'rgb(85, 201, 246)'
                }
              },
              {
                value: 10,
                name: '未完成',
                itemStyle: {
                  color: 'rgba(226, 145, 184, 1)'
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    },
    rectificationOptions() {
      return {
        // title: {
        //   text: '质量类型占比',
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        textStyle: {
          color: '#fff'
        },
        legend: {
          data: ['已整改', '未整改'],
          bottom: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['第一周', '第二周', '第三周', '第四周'],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '已整改',
            type: 'bar',
            barGap: 0,
            data:  [10, 52, 200, 334],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(81, 202, 216, 1)' },
                  { offset: 1, color: 'rgba(81, 202, 216, 0.3)' }
                ]
              )
            }
          },
          {
            name: '未整改',
            type: 'bar',
            data:  [10, 22, 20, 34],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(226, 145, 184, 1)' },
                  { offset: 1, color: 'rgba(55, 142, 235, 1)' }
                ]
              )
            }
          }
        ]
      };
    },
  },
  mounted() {
    this.$message.warning('该功能正在开发中！');
  },
  components: {
    Breadcrumb,
    echartsBase
  },
  methods: {
    /**
     * 查看评级表
     */
    handleLook(row) {
      console.log('row', row);
    },
    /**
     * 下载评级表
     */
    handleDownload(row) {
      console.log('Download', row);
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
    },
    /**
     * 搜索
     * @param type {String} 搜索类型
     * @param value {String} 搜索值
     */
    handleSearch(type, value) {},
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/table";

  .accepting-page {
    > main {
      width: 100%;
      height:calc(100% - 40px);
      display: flex;
      justify-content: space-between;
      background-color: $baseBg;
      padding: 20px;
      .tree-container {
        width: 450px;
        height: 100%;
        padding: 20px 10px;
        background-color: $mainBg;
        border-radius: 10px;
        .tree-header {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .tree-search {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 20px 0;
          .el-button {
            margin-left: 20px;
          }
        }
        .tree-content {
          height: 650px;
          overflow: auto;
        }
      }
      .content {
        width: calc(100% - 480px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: $baseBg;
        .echart-container {
          width: 100%;
          height: 48%;
          display: flex;
          justify-content: space-between;
          .echarts-item {
            width: 66%;
            height: 100%;
            background-color: $mainBg;
            border-radius: 10px;
            padding: 10px 10px 0;
            &.complete {
              width: 33%;
            }
          }
        }
        .table-container {
          height: 50%;
          background-color: $mainBg;
          border-radius: 10px;
          .table-search {
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .search-item {
              width: 300px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 20px;
              label {
                width: 120px;
                text-align: right;
                padding-right: 10px;
              }
            }
          }
          .table-content {
            padding: 0 20px;
          }
          .btn {
            padding-right: 8px;
          }
        }
      }
    }
  }
</style>
